import type { CompanyInfoDto, GroupInfoDto, WesureInfoDto } from '@/api/company/types'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import type { AnyObject } from '@/types'
import { Component, Prop } from 'vue-facing-decorator'
import type { VxeColumnSlotTypes, VxeGridPropTypes, VxeTableDataRow } from 'vxe-table'
import toNative from '@/utils/toNative'
import type { FilterDto } from '@/render/FilterRender'
import { DailyGroupInsureCompanyType, DailyProductTypeCnEnum, getKeyToEnum, InsuranceAuditStatusCnEnum } from '@/const/enum'

import { getWesureAuditList } from '@/api/insurance/group'
import type { WesureAuditDto } from '@/api/insurance/daily/types'
import PreviewVideoOrImage from '@/components/preview-media/PreviewVideoOrImage'

@Component
export class InsuranceCheck extends TableRender {
    @Prop() dailyInfo!: WesureInfoDto | GroupInfoDto
    @Prop() companyBasicInfo!: CompanyInfoDto
    @Prop() insureCompanyType!: DailyGroupInsureCompanyType
    @Prop() productType!: DailyProductTypeCnEnum

    noTablePadding = true
    noFilterPadding = true
    filterTheme = 'light'

    showVideoDialog = false
    curItem = {}
    videoList = [] as string[]

    filterConfig() {
        return {
            serveCompanyName: {
                name: '派遣单位',
                element: 'input',
            },
            auditStatus: {
                name: '保险状态',
                element: 'select',
                options: getKeyToEnum(InsuranceAuditStatusCnEnum, true)
            }
        } as FilterDto
    }

    // tableConfig() {
    //     const config = super.tableConfig()
    //     config.height = '400px'
    //     return config
    // }

    tableColumnConfigOld = () => [
        {
            field: 'serveCompanyName',
            title: '派遣单位',
            width: 180
        },
        {
            field: 'auditStatus',
            title: '审批状态',
            params: {
                tags: {
                    1: 'success',
                    2: 'danger',
                    3: 'processing'
                },
            },
            formatter: ({ row }) => {
                return InsuranceAuditStatusCnEnum[row.auditStatus]
            },
            slots: {
                default: 'colorTag'
            }
        },
        {
            field: 'contacts',
            title: '负责人'
        },
        {
            field: 'phone',
            title: '手机号',
            width: 110
        },
        {
            field: 'fileDetailList',
            title: '图片视频',
            slots: {
                default: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
                    return <PreviewVideoOrImage src={row.params?.file} />
                }
            }
        },
        {
            field: 'industryName',
            title: '行业名称',
            formatter: ({ row }) => {
                return row?.wesureInfo?.industryName
            }
        },
        {
            field: 'area',
            title: '地区'
        }
        // {
        //     field: 'operate',
        //     title: '操作',
        //     slots: {
        //         default: ({ row, column }: VxeColumnSlotTypes.ContentSlotParams) => {
        //             return (
        //                 <div>
        //                     <ElLink underline={false} type="primary">
        //                         添加视频
        //                     </ElLink>
        //                 </div>
        //             )
        //         }
        //     }
        // }
    ] as TableRenderColumnTypes<WesureAuditDto>

    onShowVideo(list: string[]) {
        this.videoList = list
        this.showVideoDialog = true
    }

    getData() {
        this.onPage(1)
    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        if (!this.dailyInfo?.companyId) return []
        return getWesureAuditList({
            companyId: this.dailyInfo.companyId,
            productType: this.productType,
            insureCompanyType: this.insureCompanyType,
            pageNum: page,
            pageSize: size,
            ...filters
        })
    }

    render() {
        return (
            <>
                {super.render()}
            </>
        )
    }
}

export default toNative<
    { dailyInfo: WesureInfoDto | GroupInfoDto, insureCompanyType: DailyGroupInsureCompanyType, productType: DailyProductTypeCnEnum },
    { refresh: () => void }
        >(InsuranceCheck)
